<template>
  <div class="container">
    <c-r-m-head
      ref="crmTableHead"
      :crm-type="crmType"
      :showFilterView="true"
      @handle="handleHandle"
      @on-search="crmSearch"
      @filter="handleFilter"
      @on-export="exportInfos"
      placeholder="请选择"
    >
    </c-r-m-head>
    <div class="table-container">
      <div class="statis d-flex">
        <div>
          协议总份数: <span class="all">{{ moneyPageData.all }}</span> 份
        </div>
        <div class="ml-10">
          已发起: <span class="used">{{ moneyPageData.used }}</span> 份
        </div>
        <div class="ml-10">
          已签署: <span class="used">{{ moneyPageData.sign }}</span> 份
        </div>
        <div class="ml-10">
          剩余: <span class="residue">{{ moneyPageData.residue }}</span> 份
        </div>
      </div>
      <el-table
        v-loading="loading"
        id="crm-table"
        :row-height="40"
        :data="list"
        border
        :cell-class-name="cellClassName"
        :height="tableHeight"
        :row-key="`${crmType}Id`"
        class="n-table--border"
        highlight-current-row
        style="width: 100%"
        @row-click="handleRowClick"
        @sort-change="sortChange"
      >
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="fieldFormatter"
          sortable="cus tom"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="item.prop == 'fun'">
              <span class="can-visit--underline" @click="lockRow(scope.row)"
                >预览</span
              >
              <span class="can-visit--underline" @click="copyLink(scope.row)"
                >复制签署链接</span
              >
            </template>
            <template v-else-if="item.prop == 'signStatus'">
              <span
                v-if="scope.row.signStatus === '已签署'"
                style="color: #13B77F;"
                >已签署</span
              >
              <span
                v-if="scope.row.signStatus === '未签署'"
                style="color: #FA2F2F;"
                >待签署</span
              >
            </template>
            <template v-else>
              {{ fieldFormatter(scope.row, scope.column) }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 相关详情页面 -->
    <c-r-m-all-detail
      :visible.sync="showDview"
      :crm-type="rowType"
      :id="rowID"
      :isAgreement="false"
      class="d-view"
      @handle="handleHandle"
    />
  </div>
</template>

<script>
import CRMHead from "../components/CRMHead.vue";
import CRMAllDetail from "@/views/crm/components/CRMAllDetail";
import {
  getContractStatis,
  getCheckContract,
  exportAllExportExcel
} from "@/api/admin/agreement";
import Table from "../mixin/Table";
import { debounce } from "throttle-debounce";
import { copyText, downloadExcelWithResData } from "@/utils/index";
import { Loading } from "element-ui";
export default {
  name: "signingRecord",
  components: {
    CRMHead,
    CRMAllDetail
  },
  mixins: [Table],
  data() {
    return {
      crmType: "signingRecord",
      /** 高级筛选 */
      filterObj: [] // 筛选确定数据
    };
  },
  mounted() {
    console.log();
    /** 控制table的高度 */
    window.onresize = () => {
      this.tableHeight = document.documentElement.clientHeight - 270;
    };
    // 获取协议数量
    getContractStatis().then(res => {
      if (res && res.code === 0) {
        this.moneyPageData = res.data;
      }
    });
  },
  methods: {
    handleHandle(data) {
      this.showDview = false;
      this.getList();
    },
    /** 搜索 */
    crmSearch(options) {
      this.currentPage = 1;
      this.pageSize = 15;
      this.getList(options);
    },

    /** 筛选操作 */
    handleFilter(data) {
      this.filterObj = data;
      this.currentPage = 1;
      this.getList();
    },

    // 导出操作
    exportInfos() {
      const loading = Loading.service({
        fullscreen: true,
        text: "导出中..."
      });
      exportAllExportExcel()
        .then(res => {
          downloadExcelWithResData(res);
          loading.close();
          setTimeout(() => {
            this.$bus.emit("document-visibility", "visible");
          }, 2500);
        })
        .catch(() => {
          loading.close();
          setTimeout(() => {
            this.$bus.emit("document-visibility", "visible");
          }, 2500);
        });
    },

    // 预览
    lockRow: debounce(500, function(row) {
      getCheckContract({
        contractNo: row.contractNo
      }).then(res => {
        if (res && res.code === 0) {
          window.open(res.data.url, "_blank");
        } else {
          this.$message.error(res.msg);
        }
      });
    }),
    // 复制签署链接
    copyLink: debounce(500, function(row) {
      getCheckContract({
        contractNo: row.contractNo
      }).then(res => {
        if (res && res.code === 0) {
          copyText.call(this, res.data.url);
        }
      });
    }),

    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "customerName") {
        return "can-visit--underline";
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.table-container {
  margin-top: 16px;
  .statis {
    padding: 16px;
    background-color: #fff;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    .all {
      color: #0066f9;
    }
    .used {
      color: #13b77f;
    }
    .residue {
      color: #fa2f2f;
    }
  }
}
#crm-table {
  padding: 0 16px;
}
</style>
